<template>

    <div class="userManage">
        <div class="userManage-left">
            <img class="user-avatar" :src="Data.userInfo.avatar" alt="">
        </div>
        <div class="userManage-right"></div>
    </div>

</template>


<script setup>
import API from "@/api";
import { ref, reactive, onBeforeMount,onBeforeUnmount } from 'vue'
const Props = defineProps(["user"])
const Data = reactive({
    userInfo: {}
})
onBeforeMount(() => {
    GetUserBaseInfo(Props.user)
})
function GetUserBaseInfo(user) {
    API.Manage.userInfo({ user })
        .then(res => {
            let { data } = res
            Data.userInfo = data
        }).catch(err => {
            console.log("GetUserBaseInfo err");
            console.log(err);
        })
}
</script>

<style>
.userManage {
    height: 450px;
}
.userManage-left{
    width: 120px;
    border-right: 1px solid #c3c3c3;
    height: 100%;
}
.user-avatar{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
</style>